<template>
    <div>
        <div class="options">
            <Button class="title-option" type="success" @click="addModal=true">添加</Button>
        </div>
        <!--季度l课程设置-->
        <Table border :columns="columns" :data="data">
            <template slot-scope="{ row }" slot="status">
                <Icon type="md-checkmark" v-if="row.status==1" color="green" size="24"/>
            </template>
            <template slot-scope="{row}" slot="action">
                <div class="table-options">
                    <Button type="primary" size="small" style="margin-right: 15px" v-if="row.status!=1"
                            @click="edit(row)">设为默认
                    </Button>
                    <Button type="error" size="small" @click="remove(row)">删除</Button>
                </div>
            </template>
        </Table>
        <Modal
                v-model="addModal"
                title="添加季度"
                :closable="false"
                :mask-closable="false">
            <Form
                    ref="formValidate"
                    :model="formItem"
                    :rules="ruleValidate"
                    :label-width="80">
                <FormItem label="季度名称" prop="name">
                    <Input v-model="formItem.name" placeholder="课程名称"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="cancel">取消</Button>
                <Button type="primary" size="large" @click="submit('formValidate')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {quarterAdd, quarterDelete, quarterGetAll, quarterSetDefault} from "../request/api"

    export default {
        name: "Quarter",
        data() {
            return {
                addModal: false,
                columns: [
                    {
                        title: '季度名称',
                        key: 'name'
                    }, {
                        title: '默认选择',
                        slot: 'status'
                    }, {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ],
                data: [],
                formItem: {
                    name: '',
                },
                ruleValidate: {
                    name: [
                        {required: true, message: '名字不能为空', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            this.getAll();
        },
        methods: {
            add() {
                console.log("add");
            },
            getAll() {
                quarterGetAll().then((res) => {
                    console.log(res);
                    this.data = res.data;
                });
            },
            edit(row) {
                console.log(row);
                quarterSetDefault(row.id).then((res) => {
                    if (res.code == 200)
                        this.getAll();
                })
            },
            remove(row) {
                this.$Modal.confirm({
                    title: '确认删除',
                    content: row.name,
                    onOk: () => {
                        quarterDelete(row.id).then((res) => {
                            console.log(res);
                            if (res.code == 200) {
                                this.$Message.success('删除成功')
                                this.getAll();
                            } else {
                                this.$Message.error(res.msg)
                            }
                        })
                    }
                })
            },
            cancel() {
                this.addModal = false;
            },
            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        quarterAdd(this.formItem).then((res) => {
                            if (res.code == 200) {
                                this.$Message.success('保存成功');
                                this.$refs[name].resetFields();
                                this.getAll();
                            } else
                                this.$Message.error(res.msg);
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>

    .options {
        display: flex;
        align-items: center;
        flex-direction: row;
        margin-bottom: 10px;
    }

    .table-options {
        display: flex;
        justify-content: flex-end;
    }
</style>
